@import 'mixins';
@import 'vars';

.root {
    cursor: pointer;

    &.disabled {
        cursor: default;
    }
}

.btn-outline-danger {
    @include absolute(.25rem, null, null, -1rem);
    border-radius: 100%;
    border-color: $color-theme-error;
    background-color: $color-white;
    display: none;

    &:hover {
        color: $color-theme-error-dark;
    }
}

.sm {
    .icon {   
        @include force-height(2rem);
        @include force-width(2rem);
    }
}

.md {
    .icon {   
        @include force-height(3rem);
        @include force-width(3rem);
    }
}

.lg {
    .icon {   
        @include force-height(4rem);
        @include force-width(4rem);
    }
}

.icon {
    position: relative;
    border-radius: 100%;
    border: null;
    color: $color-white;
    cursor: pointer;

    &:hover {
        .btn-outline-danger {
            display: block;
        }
    }
}

.link {
    font-size: $font-small;
    font-weight: normal;
}

.title {
    font-style: normal;
    font-weight: 500;
    line-height: 1;
}

.text {
    font-size: $font-small;
    font-weight: normal;
    margin-bottom: .125rem;
    margin-top: .25rem;
}